'use client';

import React from 'react';
import { Flex, Space } from 'antd';
import a from './a.png';
import { StaticImageData } from 'next/image';
import { px2vw, px2vh, responsive } from '@/app/cg06/utils/responsive'; 

interface BoxProps {
	icon: string | StaticImageData;
	label: string;
	value: number;
	unit: string;
	labelStyle?: React.CSSProperties;
}

const Box: React.FC<BoxProps> = props => {
	const { icon, label, value, unit, labelStyle } = props;

	return (
		<Flex
			align="center"
			style={{
				position: 'relative',
				width: px2vw(390),
				// height: 104,
				borderRadius: '100px 0px 0px 100px'
			}}
		>
			<img
				src={a.src}
				alt="a"
				style={{
					width: px2vw(384),
					height: px2vh(104),
					position: 'absolute',
					top: 0,
					left: 0,
					zIndex: -1
				}}
			/>
			<Flex align="center" justify="center" style={{ width: px2vw(100), height: px2vh(104) }}>
				<img src={icon} alt="icon" style={{ width: px2vw(48), height: px2vh(48) }} />
			</Flex>
			<span
				style={{
					flex: 1,
					paddingLeft: px2vw(10),
					color: 'rgba(223,242,255,0.8)',
					fontSize: px2vw(20),
					fontWeight: 600,
					...labelStyle
				}}
			>
				{label}
			</span>
			<Space size={5} align="baseline">
				<span
					style={{
						color: 'rgba(193,234,255,0.8)',
						fontSize: px2vw(32),
						fontWeight: 'bold'
					}}
				>
					{value.toLocaleString('en')}
				</span>
				<span
					style={{
						color: 'rgba(193,234,255,0.8)',
						fontSize: px2vw(12),
						fontWeight: 600
					}}
				>
					{unit}
				</span>
			</Space>
		</Flex>
	);
};

export default Box;

